<template>
  
 <div>
   <h1>{{title}}</h1>
  
     <div class="twobox">
      
        <!-- 文章作者头像 -->
       <div class="imgpic" >
          <img :src="getauthorImg(this.author)" /> 
       </div>
         <p class="name">{{author}}</p> 
   <p class="time1">{{time}}</p>
   </div>
   <el-divider><i class="el-icon-mobile-phone"></i></el-divider>
 <div >
       <div class="content" v-html="content">{{content}}
</div>
 <el-input
  type="textarea"
  placeholder="请输入评论内容"
  v-model="texta"
  class="inputcon"
  maxlength="50"
  show-word-limit

>
</el-input>
  <el-button type="danger" @click="commit(articleid)">发表评论</el-button>
  <div class="commit">
    <ul>
      <li v-for="(item,index) in textlist" :key="index">
        <div class="flexbox">
          <!-- 评论头像 -->
          <div class="imgbox">
                <img  class="img" :src="getuserImg(item.userimg)"/> 
          </div>
     
        <p class="user">{{item.user}}</p> 
         <p class="comi">{{item.content}}</p>
          <p class="time2">{{item.comtime}}</p>
        </div>
         <el-divider></el-divider>
      </li>
   
    </ul>
  </div>
 </div>
 </div>
</template>

<script>

export default{
  name:"toarticle",
  data(){
    return{
      articleid:"",
     user:"",//登录的用户id
      title:"",
      content:"",
      time:"",
      author:"",
      texta:"",
      textlist:[],
      authorimg:"",
      arrlength:"",
      userimg:[],
      adduserimg:""
    }
  },
  created(){
this.articleid=this.$route.params.id;
this.user=window.sessionStorage.getItem("token");
this.getdetail();
this.gettextlist();

  },

methods:{
getdetail(){
  this.$axios.get("/app/login/getDetailarticle",{params:{
    id:this.articleid
  }}).then((res)=>{
   // console.log(res);
    this.title=res.data[0].title;
    this.time=res.data[0].time;
    this.content=res.data[0].content;
    this.author=res.data[0].author;
  })

    this.$axios.get("/app/login/getimg",{params:{
    xid:this.user
  }}).then((res)=>{
    console.log(res);
    this.adduserimg=res.data[0].img;
  })
},
commit(articleid){
  var year=new Date().getFullYear();
  var month=new Date().getMonth()+1;
  var day=new Date().getDate();
  var hour=new Date().getHours();
  var minute=new Date().getMinutes();
  var second=new Date().getSeconds();
  if(second<10){
    second='0'+second;
  }
  var date=year+"-"+month+"-"+day+" "+hour+":"+minute+":"+second;

  if(this.texta.trim()==""){
    this.$message.error("评论不能为空");
  }else{
     this.$axios.post("/app/login/upcomments",{
    user:this.user,
    texta:this.texta,
    author:articleid,
    day:date,
    img:this.adduserimg
  }).then((res)=>{
   // console.log(res);
    if(res.data.state==201){
      this.$message.success("发布成功");
     this.texta="";
    }
    this.$router.go(0);
  })
  }
 
},
gettextlist(){
  // console.log(this.articleid);
  this.$axios.get("/app/login/gettextlist",{
    params:{
      xx:this.articleid
    }
  }).then((res)=>{
   
    // console.log(res.data);
    this.textlist=res.data;
  })
},
// 获取作者头像
 getauthorImg(xau){
  if(xau!==""){

 this.$axios.get("/app/login/getimg",{params:{
    xid:xau
  }}).then((res)=>{
    // console.log(res);
    this.authorimg=res.data[0].img;
  })
  if(this.authorimg==null||this.authorimg==""){
  return require("../assets/original.png")
  }else{
      return require("../../server/upload/"+this.authorimg);
  }

  }
 
  
  
},
// 获取评论者的头像
getuserImg(userimg){
  if(userimg==""||userimg==null){
     return require("../assets/original.png");
  }else{
 return require("../../server/upload/"+userimg);
  }
}
  


},



  }

</script>

<style scoped>
 .content{
   width: 1000px;
   

   /* margin-left: 15%; */
   margin:auto;
   /* 水平居中 */
   text-align: left;

 }
 .twobox{
   display: flex;
   justify-content:flex-end;
   width: 250px;
  margin-left: 80%;
 }
 .name{
 
   flex: 1;
   
 }
 .time1
 
 {
   flex: 2;

 }
 .imgpic{
   flex: 1;
   border: 1px solid #eee;
 border-radius: 50%;
 /* background-color: blanchedalmond; */
 height: 60px;
 width:60px;
  box-shadow: 0 0 10px #ddd;
 }
 .imgpic img{
   width: 100%;
   height: 100%;
   border-radius: 50%;
   
 }
 .inputcon{
   width: 600px;
   margin-top: 100px;
   margin-left: 290px;
 }
 li{
    list-style-type: none;
    width: 1000px;
   margin:auto;
   /* background-color: blueviolet; */
  margin-top: -30px;
 }
 .flexbox{
 display:flex;

   width: 1000px;
   height: 80px;
   margin-bottom: -32px;
   
 }
 .commit{
   margin-top: 100px;
  
 }
 .imgbox{
   
   border: 1px solid #eee;
 border-radius: 50%;
 /* background-color: blanchedalmond; */
 height: 40px;
 width:40px;
  box-shadow: 0 0 10px #ddd;
  margin-top: 20px;
 margin-right: 10px;
 }
 .img{
   height: 100%;
   width: 100%;
   border-radius: 50%;
 }
 .comi{
   flex: 6;
   text-align: left;
   /* background-color: aqua; */
   line-height: 60px;
   font-size: 20px;
   font-family: monospace;
   overflow:hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 .time2{
   flex: 2;
   /* background-color: chartreuse; */
   /* text-align: right; */
   line-height: 60px;
   font-size: 14px;
   color: rgb(133, 131, 131);
   text-align: justify;
 }
 .user{
   flex: 1;
   /* background-color: burlywood; */
   line-height: 60px;
   text-align: left;
   font-size: 14px;
  color: rgb(133, 131, 131);
 }
</style>